<template>
  <div class="app-container">
    <el-card>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.listFindName" placeholder="请输入关键字" style="width: 300px;"
                    prefix-icon="el-icon-search"
                    size="large"
          />
        </el-form-item>
        <el-form-item style="flex-grow: 1;"/>
        <el-form-item style="margin-right: 0;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addDialogVisible=true">新建</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="filterList"
        element-loading-text="Loading"
        border
        stripe
        highlight-current-row
      >
        <el-table-column align="center" label="产线编号" width="84">
          <template v-slot="scope">
            {{ scope.row.lid }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="产线名称">
          <template v-slot="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="操作" align="center" width="360">
          <template v-slot="scope">
            <el-button icon="el-icon-edit" type="primary" size="small" @click="openChangeDialog(scope.row)">修改名称
            </el-button>
            <el-button icon="el-icon-user" type="primary" size="small" @click="openUserDialog(scope.row)">权限管理
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" @click="deleteLine(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="修改产线信息"
      :visible.sync="changeDialogVisible"
      width="30%"
    >
      <el-form :model="changeForm">
        <el-form-item label-position="right" label="产线名称:">
          <el-input v-model="changeForm.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button style="margin-left: auto;" @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeFormMethod">修 改</el-button>
      </span>

    </el-dialog>
    <el-dialog
      title="新增产线"
      :visible.sync="addDialogVisible"
      width="30%"
    >
      <el-form :model="addForm">
        <el-form-item label-position="right" label="产线名称:">
          <el-input v-model="addForm.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button style="margin-left: auto;" @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormMethod">新 增</el-button>
      </span>

    </el-dialog>
    <el-dialog title="权限管理" :visible.sync="roleManageDialog" width="60vw">
      <div style="height:500px;width: 100%">
        <el-scrollbar style="height:100%">
          <el-form ref="ruleForm" :model="roleManageDialogData" status-icon class="demo-ruleForm">
            <el-form-item label="新增员工:" style="text-align: left">
              <el-input v-model="roleManageDialogData.keyword" placeholder="请输入姓名或工号" style="width: 200px;"
                        prefix-icon="el-icon-search"
                        size="small"
                        @keyup.enter.native="searchUser(1)"
              />
              <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 12px"
                         @click="searchUser(1)">
                搜索
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            style="width: 100%"
            :data="searchList"
          >
            <el-table-column
              label="工号"
              prop="uid"
            />
            <el-table-column
              label="姓名"
              prop="username"
            />
            <el-table-column
              align="right"
              width="240"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="setAuth(scope.row, roleManageLineInfo.lid, {a: 0, r: 1,w: 1})"
                >设为普通员工
                </el-button>
                <el-button
                  size="mini"
                  @click="setAuth(scope.row, roleManageLineInfo.lid, {a: 1, r: 1,w: 1})"
                  type="primary">
                  设为管理员
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;text-align: center;margin:24px 0 0 0;">
            <el-pagination
              :page-size="5"
              background
              layout="prev, pager, next"
            />
          </div>
          <div style="margin: 24px 0 0 0;">
            <span style="font-size: 14px;font-weight: bold;">已有员工&nbsp;:</span>
          </div>
          <el-table
            style="width: 100%"
            :data="currentLineUserList"
          >
            <el-table-column
              label="工号"
              prop="uid"
            />
            <el-table-column
              label="姓名"
              prop="username"
            />
            <el-table-column label="权限">
              <!--          显示权限-->
              <template slot-scope="scope">
                <el-tag v-if="scope.row.a === 1" type="success">管理员</el-tag>
                <el-tag v-else type="warning">普通员工</el-tag>
              </template>
            </el-table-column>
            <!--        <el-table-column label="读写">-->
            <!--          &lt;!&ndash;          显示读写权限&ndash;&gt;-->
            <!--          <template slot-scope="scope">-->
            <!--            <el-tag v-if="scope.row.a === 1" type="success">管理员</el-tag>-->
            <!--            <el-tag v-else type="warning">普通员工</el-tag>-->
            <!--          </template>-->
            <!--        </el-table-column>-->
            <el-table-column
              align="right"
              width="240"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.a === 1"
                  size="mini"
                  type="primary"
                  @click="setAuth(scope.row, roleManageLineInfo.lid, {a: 0, r: 1,w: 1})"
                >设为普通员工
                </el-button>
                <el-button
                  v-else
                  size="mini"
                  @click="setAuth(scope.row, roleManageLineInfo.lid, {a: 1, r: 1,w: 1})"
                  type="primary">
                  设为管理员
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="setAuth(scope.row, roleManageLineInfo.lid, {a: 0, r: 0,w: 0})"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="roleManageDialog=false">取消</el-button>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getAllLineList, updateLine, deleteLine, addLine, updateManager, addRootManager} from '@/api/line'
import {findUser} from '@/api/user'

export default {
  data() {
    return {
      changeDialogVisible: false,
      changeForm: {
        lid: -1,
        name: ''
      },
      addDialogVisible: false,
      addForm: {
        name: ''
      },
      queryForm: {
        listFindName: ''
      },
      list: [],
      listLoading: false,
      roleManageDialog: false,
      roleManageLineInfo: {},
      roleManageDialogData: {
        keyword: ''
      },
      searchList: [],
      total: 0
    }
  },
  computed: {
    filterList() {
      return this.list.filter(item => {
        return item.name.includes(this.queryForm.listFindName)
      })
    },
    currentLineUserList() {
      if (!this.roleManageLineInfo.userList) return []

      const rt = this.roleManageLineInfo.userList.map(item => {
        const {userinfo, ...rest} = item
        return {...userinfo, ...rest}
      })
      //去掉自己
      return rt.filter(item => item.uid !== this.$store.getters.id)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    setAuth(row, lid = this.roleManageLineInfo.lid, auth) {
      const {uid} = row
      updateManager(lid, {uid, ...auth}).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.fetchData()
      })
    },
    searchUser(page) {
      this.listLoading = true
      findUser(5, page, {name: this.roleManageDialogData.keyword}).then(response => {
        this.searchList = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },

    openUserDialog(lineInfo) {
      this.roleManageLineInfo = lineInfo
      this.roleManageDialog = true
    },
    addFormMethod() {
      addLine(this.addForm).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.$store.commit('setLine', res.data)
        this.addDialogVisible = false
        this.addForm.name = ''
        this.$router.go(0)
      })
    },
    deleteLine(row) {
      this.$confirm('此操作将永久删除该产线, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLine(row.lid).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openChangeDialog(row) {
      this.changeForm = {...row}
      this.changeDialogVisible = true
    },
    changeFormMethod() {
      updateLine(this.changeForm.lid, {name: this.changeForm.name}).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.fetchData()
        this.changeDialogVisible = false
      })
    },
    fetchData() {
      this.listLoading = true
      getAllLineList().then(res => {
        this.list = res.data
        const currentOpenLine = this.roleManageLineInfo.lid
        this.roleManageLineInfo = this.list.find(item => item.lid === currentOpenLine) || {}
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  display: flex;
}
</style>
